<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="货号">
          <a-auto-complete
            v-decorator="['productSn', validatorRules.productSn]"
            :data-source="productSnDataSource"
            placeholder="请输入货号"
            :filter-option="filterOption"
            @select="onSelect"
            :disabled="editEnable"
          />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="商品名称">
          <a-input placeholder="请输入商品名称" :disabled="editEnable" v-decorator="['productName', validatorRules.productName ]" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="分类">
          <a-input placeholder="请输入商品分类" :disabled="editEnable" v-decorator="['productCategoryName', validatorRules.productCategoryName ]" />
        </a-form-item>
<!--        <a-form-item-->
<!--          :labelCol="labelCol"-->
<!--          :wrapperCol="wrapperCol"-->
<!--          label="产品详情网页内容11">-->
<!--          <a-input placeholder="请输入产品详情网页内容" v-decorator="['detailHtml', {}]" />-->
<!--        </a-form-item>-->
        <!--新增-->
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="使用指南详情">
          <j-editor v-decorator="['detailHtml', {}]"
                    :action="uploadAction"
                    :data="{'isup':1,'dir':'cms/invitation'}"
                    triggerChange/>
        </a-form-item>

      </a-form>
    </a-spin>
  </j-modal>
</template>

<script>
  import { httpAction, getAction } from '@/api/manage'
  import JEditor from '../../../components/jeecg/JEditor'
  import pick from 'lodash.pick'
  import moment from "moment"

  export default {
    name: "pmsProductUseGuideModal",
    components: {
      JEditor
    },
    data () {
      return {
        productSnDataSource: [],
        title:"操作",
        visible: false,
        editEnable: true,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },

        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules:{
          productName:{rules: [{ required: true, message: '请输入产品名称!' }]},
          productSn:{rules: [{ required: true, message: '请输入货号!' }]},
          productCategoryName:{rules: [{ required: true, message: '请输入分类!' }]},
        },
        url: {
          add: "/pms/pmsProductUseGuide/add",
          edit: "/pms/pmsProductUseGuide/edit",
          queryList: '/pms/pmsProduct/queryList',
          fromProductSnToProduct: '/pms/pmsProduct/fromProductSnToProduct',
          fileUpload: window._CONFIG['domianURL'] + '/sys/common/ossUpload',
        },
      }
    },
    created () {
    },
    computed: {
      uploadAction: function() {
        return this.url.fileUpload
      }
    },
    methods: {
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLocaleLowerCase().indexOf(input.toLocaleLowerCase()) >= 0
        )
      },
      onSelect(value) {
        console.log('onSelect', value)
        getAction(this.url.fromProductSnToProduct, { productSn: value }).then(res => {
          if (res.success) {
            console.log('ProductSnCode => ' + res)
            this.form.setFieldsValue({ 'productName': res.result.name })
            this.form.setFieldsValue({ 'productCategoryName': res.result.productCategoryName })
          } else {
            console.log(res.message)
            this.form.setFieldsValue({ 'productName': '' })
            this.form.setFieldsValue({ 'productCategoryName': '' })
          }
        })
      },
      add () {
        this.edit({});
      },
      edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.editEnable = true;
        if(this.model.id === undefined || this.model.id === null || this.model.id === '' ){
          this.editEnable = false;
        }
        this.visible = true;
        this.getProduct()
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'partnerId','productPic','productId','productName','productSn','productCategoryId','productCategoryName','detailHtml','cancelFlag'))
		  //时间格式化
        });
      },
      getProduct() {
        getAction(this.url.queryList).then(res => {
          if (res.success) {
            console.log('ProductData => ' + res.result)
            this.productSnDataSource = [...new Set(res.result.map(data => (data['productSn'])))]
          } else {
            console.log(res.message)
          }
        })
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            let formData = Object.assign(this.model, values);
            //时间格式化
            console.log('2222');
            console.log(formData)
            httpAction(httpurl,formData,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })



          }
        })
      },
      handleCancel () {
        this.close()
      },


    }
  }
</script>

<style lang="less" scoped>

</style>
